<template>
  <div class="cookbook-container">
    <header>美食大全</header>
    <div class="body">
      <Swiper :data="swiperData"></Swiper>
      <SearchBar></SearchBar>
      <HotCate :data="hotCate"></HotCate>
      <Top10 :data="top10Data"></Top10>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  import Swiper from './Swiper.vue'
  import SearchBar from '@/components/SearchBar.vue'
  import HotCate from './HotCate.vue'
  import Top10 from './Top10.vue'

  export default {
    data() {
      return {
        list: [],
        hotCate: []
      }
    },

    components: {
      SearchBar,
      Swiper,
      HotCate,
      Top10
    },
    
    computed: {
      swiperData() {
        return this.list.slice(0, 5)
      },
      top10Data() {
        return this.list.slice(0, 10)
      }
    },

    async mounted() {
      const resultList = await axios.get('http://localhost:9000/list')
      this.list = resultList.data.data

      const resultHotCate = await axios.get('http://localhost:9000/hotcat')
      this.hotCate = resultHotCate.data
    }
  }
</script>

<style lang="scss">
.cookbook-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    height: .44rem;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    line-height: .44rem;
    background-color: #ee7530;
  }

  .body {
    overflow: scroll;
    flex: 1;
    .my-swipe .van-swipe-item {
      img {
        width: 100%;
      }
    }
  
    .hotcate {
      background-color: #fff;
      h1 {
        font-weight: 400;
        height: .5rem;
        padding-left: .1rem;
        line-height: .5rem;
      }
      .van-grid-item__icon {
        font-size: .6rem;
        img {
          border-radius: .06rem;
        }
      }
    }
  }

}
</style>